<template>
	<view class="register">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" placeholder="邮箱"></wInput>
				<wInput v-model="passData" type="password" maxlength="18" placeholder="登录密码" isShowPass></wInput>
				<wInput v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode ref="runCode" @setCode="getVerCode()"></wInput>
			</view>

			<wButton text="注 册" :rotate="isRotate" @click.native="startReg()"></wButton>

			<!-- 底部信息 -->
			<view class="footer">
				<text @tap="isShowAgree" class="cuIcon" :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'">同意</text>
				<!-- 协议地址 -->
				<navigator url="" open-type="navigate">《协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue'; //input
	import wButton from '../../components/watch-login/watch-button.vue'; //button

	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '',
				phoneData: '321071784@qq.com', // 用户/电话
				passData: '', //密码
				verCode: '', //验证码
				showAgree: true, //协议是否选择
				isRotate: false //是否加载旋转
			};
		},
		components: {
			wInput,
			wButton
		},
		mounted() {
			_this = this;
		},
		methods: {
			isShowAgree() {
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
		async getVerCode() {
				//获取验证码
				if (_this.phoneData.length >= 6 && _this.phoneData.length <= 30) {
					const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
					if (reg.test(this.phoneData)) {
						const res = await this.http(this.api.securityCode, {
							uerMail: this.phoneData
						});
						this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '获取验证码成功'
						});
					} else {
						this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '邮箱不正确'
						});
					}
				}

			},
			async startReg() {
				// //注册
				// if (this.isRotate) {
				// 	//判断是否加载中，避免重复点击请求
				// 	return false;
				// }
			
				
				
				if (this.phoneData.length >= 6 && this.phoneData.length <= 18) {
					const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
					
					if (reg.test(this.phoneData)) {
						
						
						if (this.showAgree == false) {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '请先同意《协议》'
							});
							return false;
						}
						
						if (!this.passData || this.passData.length < 6) {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '输入大于6位数的密码'
							});
							return false;
						}
						
						if(!this.verCode || this.verCode.length < 6){
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '请输入真确的验证码'
							});
							return false;
						}
						
						const res = await this.http(this.api.register, {
							uerMail: this.phoneData,
							uerPwd:this.passData,
							verCode:this.verCode,
						});
						
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '注册成功'
						});
						
						
					} else {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '邮箱格式不正确'
						});
					}

					return false;
				}else if(!_this.phoneData){
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '输入邮箱'
					});
				}
		
				

				
				// console.log('注册成功');
				// _this.isRotate = true;
				// setTimeout(function() {
				// 	_this.isRotate = false;
				// }, 3000);
			}
		}
	};
</script>

<style>
	@import url('../../components/watch-login/css/icon.css');
	@import url('./css/main.css');
</style>
